<template>
  <div class="container">
    <div class="header">机械稼动率</div>
    <div class="echart-container">
      <div ref="echartsBox" class="echarts-box"></div>
    </div>
  </div>
</template>

<script>
  import commomOption from './commomOption.js';
  import * as echarts from 'echarts';

  export default {
    props: {
      data: {
        default: [],
        typeof: Array,
      },
    },
    data() {
      return {
        myChart: null,
      };
    },

    watch: {
      data: {
        handler() {
          const option = {
            tooltip: {
              trigger: 'axis',
            },
            grid: commomOption.grid,
            xAxis: Object.assign({}, commomOption.xAxis, {
              data: ['1', '2', '3', '4', '5', '6', '7'],
            }),
            yAxis: commomOption.yAxis,
            series: [
              {
                data: this.data,
                type: 'line',
                itemStyle: {
                  color: 'rgba(0, 255, 228, 1)',
                  borderColor: 'rgba(32, 255, 231, 1)',
                  borderWidth: 2,
                },
                lineStyle: {
                  width: 1,
                },
                areaStyle: {
                  color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                    {
                      offset: 0,
                      color: 'rgba(32, 255, 231, 0.6)',
                    },
                    {
                      offset: 1,
                      color: 'rgba(37, 188, 201, 0.06)',
                    },
                  ]),
                },
              },
            ],
          };
          this.echartInit(option);
        },
        immediate: true,
        deep: true,
      },
    },

    methods: {
      // echarts初始化
      echartInit(option) {
        if (this.myChart) {
          this.myChart.setOption(option);
          return false;
        }

        this.$nextTick(() => {
          this.myChart = echarts.init(this.$refs.echartsBox);

          option && this.myChart.setOption(option);
          // 根据页面大小自动响应图表大小
          window.addEventListener('resize', () => {
            this.myChart.resize();
          });
        });
      },
    },
  };
</script>
<style lang="scss" src="./container.scss" scoped></style>
